<template>
	<div class="mesAll">
		<div class="system clearfix">
			<div class="fl head_portrait"><img src="/static/images/syspic.png"/><i :class="[ this.system.read? '': 'active']" class="redRound"></i></div>
			<div class="fr mesCon">
				<div class="clearfix">
					<span class="userName fl">{{system.userName}}</span>
					<span class="mesTime fr">{{system.mesTime}}</span>
				</div>
				
				<p class="mesText">{{system.mesText}}</p>
			</div>
		</div>
		
		<ul class="chat">
			<li v-for="(item,index) in chat" :key="index" class="clearfix">
				<div class="fl head_portrait"><img :src="item.img"/><i :class="[ item.read? '': 'active']" class="redRound"></i></div>
				<div class="fr mesCon">
					<div class="clearfix">
						<span class="userName fl">{{item.userName}}</span>
						<span class="mesTime fr">{{item.mesTime}}</span>
					</div>
					
					<p class="mesText">{{item.mesText}}</p>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				system:{
					userName:"系统消息",
					mesText:"您已成功购买32000个咻咻...",
					mesTime:"刚刚",
					read:true
				},
				chat:[{
					userName:"小泡泡",
					mesText:"小哥哥你长的好帅啊",
					mesTime:"刚刚",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					read:false
				},{
					userName:"小泡泡",
					mesText:"小哥哥你长的好帅啊",
					mesTime:"1小时前",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					read:true
				},{
					userName:"小泡泡",
					mesText:"小哥哥你长的好帅啊",
					mesTime:"2天前",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					read:true
				},{
					userName:"小泡泡",
					mesText:"小哥哥你长的好帅啊",
					mesTime:"4-29",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					read:true
				},{
					userName:"小泡泡",
					mesText:"小哥哥你长的好帅啊",
					mesTime:"4-29",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					read:true
				},{
					userName:"小泡泡",
					mesText:"小哥哥你长的好帅啊",
					mesTime:"4-29",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					read:true
				},{
					userName:"小泡泡",
					mesText:"小哥哥你长的好帅啊",
					mesTime:"4-29",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					read:true
				},{
					userName:"小泡泡",
					mesText:"小哥哥你长的好帅啊",
					mesTime:"4-29",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					read:true
				},]
			}
		}
	}
</script>

<style>
	.mesAll .system{padding: 0.17rem 0rem 0.13rem 0.2rem;background-color: #fff;margin-bottom: 0.06rem;}
	.mesAll .head_portrait{width: 0.5rem;height: 0.5rem;position: relative;}
	.mesAll .head_portrait img{display: block;width: 100%;height: 100%;border-radius: 50%;overflow: hidden;}
	.mesAll .mesCon{width: calc(100% - 0.65rem);height: 0.5rem;box-sizing: border-box;padding-right: 0.2rem;padding-top: 0.05rem;}
	.mesAll .userName{font-size: 0.16rem;color: #4C4C4C;line-height: 0.16rem;}
	.mesAll .mesTime{font-size: 0.14rem;color: #808080;line-height: 0.16rem;}
	.mesAll .mesText{font-size: 0.14rem;color: #808080;line-height: 0.14rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-top: 0.1rem;}
	.mesAll .chat{background-color: #fff;padding-left: 0.2rem;}
	.mesAll .chat li{padding: 0.17rem 0rem 0.13rem;background-color: #fff;margin-bottom: 0.06rem;border-bottom: 1px solid #f5f5f5;}
	.mesAll .redRound.active{position: absolute;width: 0.12rem;height: 0.12rem;background-color: #ff5959;border-radius: 50%;right: 0;top: 0;}
	
	
</style>